<template>

  <client-only>
    <div class="cart py-container">
      <!--主内容-->
      <div class="checkout py-container  pay">
        <div class="checkout-tit">
          <h4 class="fl tit-txt"><span class="success-icon"></span><span class="success-info">订单提交成功，请您及时付款！<font color="red">（倒计时:{{totalTime}}秒）</font>订单号：{{payObj.out_trade_no}}</span>
          </h4>
          <span class="fr"><em class="sui-lead">应付金额：</em><em class="orange money">￥{{payObj.total_fee}}</em></span>
          <div class="clearfix"></div>
        </div>
        <div class="checkout-steps">
          <div class="fl weixin">支付宝支付</div>
          <div class="fl sao">
            <p class="red">请使用支付宝扫一扫。（测试阶段，所以要用沙箱版支付宝）</p>
            <div class="fl code">
              <!-- <img id="qrious" src="~/assets/img/erweima.png" alt=""> -->
              <!-- <qriously value="weixin://wxpay/bizpayurl?pr=R7tnDpZ" :size="338"/> -->
              <qriously :value="payObj.code_url" :size="338"/>

            </div>

          </div>
          <div class="clearfix"></div>
          <!-- <p><a href="pay.html" target="_blank">> 其他支付方式</a></p> -->

        </div>
      </div>
    </div>
  </client-only>




</template>
<script>
import ordersApi from '@/api/orders'
export default {
  async asyncData({params, error}) {
    console.log(params.pid)
    return {
      orderNo: params.pid,
    }
  },
     data() {
         return {
           orderNo: '',
           payObj:{},
           timer1:'',
           timer2:'',
           totalTime:120,
           fallTime:120,//倒计时120秒（也就是2分钟没支付的话就算用户放弃支付）
         }
     },
     //每隔三秒调用一次查询订单状态的方法
     created() {//页面渲染之后执行
       ordersApi.createNatvie(this.orderNo)
         .then(res => {

           this.payObj=res.data

         })
       this.timer2 = setInterval(() => {

         if(this.totalTime>0){
           this.totalTime--
         }else{//用户超过2分钟没支付视为放弃支付
           clearInterval( this.timer2)
           //提示
           this.$message({
             type: 'error',
             message: '2分钟内未支付，请移步到订单中心付款'
           })
           //todo 可以调到订单中心页面
         }
       },1000);
       this.timer1 = setInterval(() => {

         if(this.fallTime>0){
           this.fallTime=this.fallTime-3
           this.queryOrderStatus(this.payObj.out_trade_no)
         }else{//用户超过2分钟没支付视为放弃支付
           clearInterval(this.timer1)
         }
       },3000);
     },
     methods:{
         queryOrderStatus(orderNo) {
             ordersApi.queryPayStatus(orderNo)
                .then(res => {
                     if (res.code==20000) {
                       //支付成功，清除定时器
                       clearInterval(this.timer1)
                       //提示
                       this.$message({
                         type: 'success',
                         message: '支付成功!'
                       })
                       //跳转回到课程详情页面
                       this.$router.push({path: '/course/' + this.payObj.course_id})
                     }
                })
         }
     },
    destroyed() {
    clearInterval(this.timer1)
    clearInterval(this.timer2)
  }
}
</script>
